<!--  -->
<template>
    <div class="app-container">
        <el-form :inline="true" size="small">
            <el-form-item label="账号编号">
                <el-input v-model="kwd1" placeholder="请输入账号编号" size="small"></el-input>
            </el-form-item>
            <el-form-item label="账号名称">
                <el-input v-model="kwd2" placeholder="请输入账号名称" size="small"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="status" placeholder="角色状态" clearable filterable @change>
                    <el-option label="正常" value="normal"></el-option>
                    <el-option label="停用" value="stop"></el-option>
                </el-select>
            </el-form-item>

            <el-button icon="el-icon-search" type="primary" size="small" @click>搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
            <el-button icon="el-icon-edit" type="warning" size="small" @click>新增</el-button>
            <el-button icon="el-icon-edit" type="primary" size="small" @click="goComment"
                >消息管理</el-button
            >
            <el-button icon="el-icon-edit" type="primary" size="small" @click>导入</el-button>

            <el-button class="ref-btn" icon="el-icon-refresh" circle @click></el-button>
        </el-form>
        <el-table :data="tableData" border stripe>
            <el-table-column type="selection" width="60" align="center"></el-table-column>

            <template v-for="(i, index) in columns">
                <el-table-column
                    v-if="index >= 6 && index <= 8"
                    :prop="i.data"
                    :key="i.id"
                    :label="i.label"
                    align="center"
                    :width="i.width"
                >
                    <template slot-scope="scope">
                        <router-link
                            v-if="index == 6"
                            :to="'/store/orderList?query=' + scope.row.order"
                            style="color: #409eff"
                            >查看</router-link
                        >
                        <router-link
                            v-else-if="index == 7"
                            :to="'/store/productList?query=' + scope.row.product"
                            style="color: #409eff"
                            >查看</router-link
                        >
                        <router-link
                            v-else="index == 8"
                            :to="'/store/staffList?query=' + scope.row.staff"
                            style="color: #409eff"
                            >查看</router-link
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    v-else
                    :prop="i.data"
                    :key="i.id"
                    :label="i.label"
                    align="center"
                    :width="i.width"
                />
            </template>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope"
                    ><el-button type="text" icon="el-icon-edit" @click="edit(scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        style="color: #f66"
                        @click="del(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page.sync="page"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            ></el-pagination>
        </div>

        <!-- 对话框 -->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="showDialog"
            width="50%"
            @close="showDialog = false"
        >
            <el-form v-model="form" label-width="120px" :inline="false" size="normal">
                <el-form-item label="预约时间">
                    <el-date-picker
                        v-model="form.subTime"
                        type="date"
                        size="normal"
                        placeholder="请选择预约时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="门店">
                    <el-input
                        v-model="form.subShop"
                        placeholder="请填写门店"
                        style="width: 220px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="可预约数量">
                    <el-input
                        v-model="form.subCount"
                        placeholder="请填写可预约数量"
                        style="width: 220px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-select
                        v-model="form.subPayment"
                        placeholder="选择支付方式"
                        clearable
                        filterable
                        style="width: 220px"
                        @change
                    >
                        <el-option
                            v-for="(i, index) in options"
                            :key="index"
                            :label="i.label"
                            :value="i.value"
                        />
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click>确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {list,create} from '@/api/shop/store.js'
export default {
    name: "slider",
    data () {
        return {
            kwd1: "",
            kwd2: "",
            status: "",
            dialogTitle: "创建",
            showDialog: false,
            page: 1,
            limit: 11,
            total: 10,
            form: {
                subTime: "",
                subShop: "",
                subCount: "",
                subPayment: "",
            },
            options: [
                {
                    value: 1,
                    label: "支付方式1",
                },
                {
                    value: 2,
                    label: "支付方式2",
                },
            ],
            tableData: [
                {
                    id: "1",
                    name: "名字",
                    address: "地址",
                    cover: "图片",
                    isBooking: "1",
                    phone: "123123123",
                    order: "111",
                    product: "111",
                    staff: "111",
                },
                {
                    id: "1",
                    name: "名字",
                    address: "地址",
                    cover: "图片",
                    isBooking: "1",
                    phone: "123123123",
                    order: "32123",
                    product: "2123",
                    staff: "23232",
                },
                {
                    id: "1",
                    name: "名字",
                    address: "地址",
                    cover: "图片",
                    isBooking: "1",
                    phone: "123123123",
                    order: "33333",
                    product: "3333",
                    staff: "33",
                },
                {
                    id: "1",
                    name: "名字",
                    address: "地址",
                    cover: "图片",
                    isBooking: "1",
                    phone: "123123123",
                    order: "444",
                    product: "444",
                    staff: "444",
                },
            ],
            columns: [
                { key: 0, label: `门店编号`, data: "id", visible: true, width: "50" },
                { key: 1, label: `门店名称`, data: "name" },
                { key: 2, label: `门店地址`, data: "address" },
                { key: 3, label: `门店图片`, data: "cover" },
                { key: 4, label: `是否可预约`, data: "isBooking" },
                { key: 5, label: `门店电话`, data: "phone" },
                { key: 6, label: `订单列表`, data: "order", width: 80 },
                { key: 7, label: `商品列表`, data: "product", width: 80 },
                { key: 8, label: `员工列表`, data: "staff", width: 80 },
            ],
            artQuery: {
                id: "1",
            },
        };
    },
    mounted () {
        this.getList()
    },
    methods: {
        getList () {
            list().then((r) => {
                if (r.code == '200') {
                    this.tableData = r.data.rows;
                } else if (r.code != '200') {
                    this.$message.error('数据请求失败！')
                }
            })
        },

        add () {
            this.form = {};
            this.showDialog = true;
        },
        edit (i) {
            this.form = {};
            this.showDialog = true;
        },
        goComment () {
            this.$router.push("/store/sNotice");
        },
        del (i, d) {
            this.$confirm("确认删除所选数据？", "确认删除", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.tableData.splice(i, 1);
                })
                .catch(() => { });
        },
        sizeChange () { },
        currentChange () { },
    },
};
</script>
<style scoped>
.slideImg {
    width: 140px;
}
</style>
